<template>
  <div class="quotaDefine">
    <el-form
      style="background-color: #efeeef; padding: 10px"
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="数据源">
        <el-select
          v-model="selectValue"
          @change="selectChange"
          placeholder="请选择数据连接池"
        >
          <el-option
            v-for="item in datasource"
            :key="item.id"
            :label="item.datasourceName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="text" icon="el-icon-refresh-left" size="mini"
          >刷新</el-button
        >
        <el-button type="text" icon="el-icon-connection" size="mini"
          >切换关联方式</el-button
        >
        <el-button type="text" icon="el-icon-refresh" size="mini"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-card class="container" style="height: 100%">
      <el-row>
        <el-col :span="6" style="margin-right: 10px"
          ><div
            class="grid-content bg-purple"
            style="border: 1px solid #dfe4ed; text-align: center; height: 750px"
          >
            <QuotaTree />
            </div
        ></el-col>
        <el-col :span="17" style="height: 100%">
          <div class="grid-content bg-purple-light" style="height: 100%">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="用户管理" name="first"
                ><div style="padding: 20px">
                 <div>运算符</div>
                 <el-tag style="margin:5px" v-for="item in operatorList" :key="item.id" type="info">{{item.value}}</el-tag>
                </div></el-tab-pane
              >
            </el-tabs>
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-button style="margin-top: 10px" type="primary">下一步</el-button>
      </el-row>
    </el-card>
    <!-- 字段弹窗 -->
    <el-dialog
      title="选择字段"
      destroy-on-close
      :visible.sync="dialogTableVisible"
      width="40%"
    >
      <el-table
        height="400px"
        ref="multipleTable"
        :data="fieldData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column align="center" prop="columnName" label="字段名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="columnAlias"
          label="字段别名"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSelectValue"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import QuotaTree from '@/views/quota/modeling/QuotaTree.vue'
import {
  getDatasource,
  getTableAliasEnable,
  getColAlias,
} from "@/api/quota/define/define.js";
import Sortable from "sortablejs";

export default {
  components:{QuotaTree},
  data() {
    return {
      //运算符数据
      operatorList:[{value:"+",id:1},{value:"-",id:2},{value:"*",id:3},{value:"/",id:4},{value:"(",id:5},{value:")",id:6}],
      SqueryParams: {
        pageNum: 1,
        pageSize: 10,
        orderField: "UPDATE_DATE",
        order: "desc",
        tablenameAliasId: "",
      },
      routeData: {
        quota: [],
        dimension: [],
        themeId: this.themeId
      },
      //字段弹窗数据
      fieldData: [],
      multipleSelection: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      dataBaseList: [],
      confirmSlot: undefined,
      selectValue: "",
      datasource: [],
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderField: "UPDATE_DATE",
        order: "desc",
        datasourceId: undefined,
        keyword: undefined,
      },
      activeName: "first",
    };
  },
  created() {
    this.getDatasourceList();
  },
  methods: {
    //提交选中字段
    submitSelectValue() {

    },
    //选中字段
    handleSelectionChange() {},
    //选择字段
    selectField(val) {
      this.dialogTableVisible = true;
      this.queryParams.tablenameAliasId = val.id;
      getColAlias(this.queryParams).then((res) => {
        this.fieldData = res.data;
      });
    },
    //选中数据库表
    handleCurrentChange(val) {
      if (!val) {
        return;
      }
      this.dataBaseList.push(val);
    },
    //选中的值
    selectChange(val) {
      this.queryParams.datasourceId = val;
      this.getTableAliasList();
    },
    //加载表别名数据
    getTableAliasList() {
      if (this.queryParams.datasourceId == undefined) {
        this.msgError("请先选择数据源");
      } else {
        getTableAliasEnable(this.queryParams).then((res) => {
          this.tableData = res.data;
        });
      }
    },
    //加载数据源数据
    getDatasourceList() {
      getDatasource().then((res) => {
        this.datasource = res.data;
      });
    },
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>
<style lang="less" >
.el-form-item {
  margin-bottom: 0;
}
.quotaDefine {
  .el-tabs__header {
    margin: 0;
  }
  .el-tag {
    display: inline-block;
  }
  .dbtable {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
    height: 60px;
    background-color: #cbeaff;
    border-radius: 5px;
    text-align: center;
    padding-top: 10px;
  }
  .el-tabs {
    height: 708px;
  }
  .el-tabs__content {
    border: 1px solid #dfe4ed;
    height: 100%;
  }
}
</style>